<template>
  <div>
    <el-card>
      <div>
        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
          <el-form-item label="菜单名称">
            <el-input v-model="form.tenantName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="mb-1" icon="el-icon-search" size="middle" @click="getList">
              查询
            </el-button>
            <el-button type="primary" class="mb-15" icon="el-icon-refresh" size="middle" @click="getList">
              重置
            </el-button>
            <el-button type="primary" class="mb-15" icon="el-icon-plus" size="middle" @click="changeDialogStatus(true)">
              新增菜单
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" border style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" height="calc(100vh - 160px)">
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column prop="menuName" label="名称" width="200">
        </el-table-column>
        <el-table-column prop="type" label="类别" width="100">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.type==='menu'">菜单</el-tag>
            <el-tag type="success" v-else-if="scope.row.type==='page'">页面</el-tag>
            <el-tag type="success" v-else>按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路由地址">
        </el-table-column>
        <el-table-column prop="postCode" label="图标" width="100">
          <template slot-scope="scope">
            <el-icon :class="scope.row.icon"></el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status==='show'">显示</el-tag>
            <el-tag type="danger" v-else>隐藏</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="editAppItem(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="deleteAppItem(scope.row)" type="text" size="small">删除</el-button>
            <el-button @click="relationInterface(scope.row)" type="text" size="small">关联接口</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <menu-info-comp :isShow="isShowDialog" :item="appItem" @changeDialogStatus="changeDialogStatus" />
    <el-dialog title="提示" :visible.sync="isShowDelete" width="30%">
      <span>该操作将会删除该应用信息，确定是否进行删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDelete = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
      
<script>
import MenuInfoComp from './components/menuInfoComp.vue'
import { getMenuTree, deleteMenu } from "@/api/menu";
export default {
  components: {
    MenuInfoComp
  },
  data () {
    return {
      form: {
        fileName: '',
        transStatus: ''
      },
      tableData: [],
      isShowDialog: false,
      appItem: undefined,
      isShowDelete: false
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      const param = { ...this.form }
      getMenuTree(param).then((res) => {
        if (res.status === 200) {
          this.tableData = res.data;
        } else {
          this.$message(res.message);
        }
      });
    },
    changeDialogStatus (status) {
      if (status === "success") {
        this.isShowDialog = false
        this.getList()
      } else {
        this.appItem = undefined
        this.isShowDialog = status
      }
    },
    editAppItem (row) {
      this.appItem = row
      this.isShowDialog = true
    },
    deleteAppItem (row) {
      this.appItem = row
      this.isShowDelete = true
    },
    confirmDelete () {
      const param = { id: this.appItem.id }
      deleteMenu(param).then((res) => {
        this.isShowDelete = false
        this.getList()
        if (res.status === 200) {
          this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败，请重试");
        }
      });
    },
    relationInterface (row) {
      this.$router.push(`/rel/interface?menuid=${row.id}`)
    }
  },
}
</script>